import React, { useState } from "react";

// hooks只能给函数组件用
// hooks的作用是
// 1. 增强函数组件的功能，它能让函数组件拥有像类组件一样的功能(state和生命周期)
// 2. 它可以将相同功能的代码进行聚合，方便阅读和维护(自定义hooks)
// 3. 解决了高阶组件造成的组件层级变深的问题

// hooks都是以use开头
// hooks只能写在函数组件的顶层

const App = () => {
  // useState是用来给函数组件定义state用的
  // 它可以接收一个参数(变量的初始值)，并且返回一个数组(变量名和改变变量的方法)
  // 改变变量的方法是异步的, 如果想拿到改变以后的值，需要和useEffect一起使用
  const [count, setCount] = useState(3);
  const add = () => {
    // setCount(10);
    setCount((v) => v + 1);
  };

  const [list, setList] = useState([1, 2, 3, 4, 5, 6]);
  const fn = () => {
    setList((v) => [...v, 7]);
  };

  return (
    <>
      <h2>useState</h2>
      <span>{count}</span>
      <button onClick={add}>+</button>

      <hr />

      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={fn}>+7</button>
    </>
  );
};

export default App;
